<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        background-color: black;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #app{
        margin: 100px 0;
        padding: 10px;
        border: 10px solid hotpink;
    }
    .add{
        color: #fff;
        border: 5px double #fff;
        width: 600px;
        margin:  0 10px;
        padding: 10px;
        /* text-align: center; */
    }
    .dire{
        border: 5px double #fff;
        width: 630px;
        margin:10px 10px 0;
        border-collapse: collapse;
        text-align: center;
    }
    .dire th,td{
        border: 2px solid #fff;
        color: #fff;
    }
    .dire th{
        background-color: skyblue;
        color: black;
    }

</style>
<body>
    <div id="app">
        <div class="add">
            编号：<input type="text" v-model="code">
            产品名称：<input type="text" v-model="proNmae">
            <br>
            产品图片地址：<input type="text" v-model="imgSrc">
            价格：<input type="text" v-model="price">

            <input type="button" value="添加" @click="add">
        </div>
        <table class="dire">
            <tr>
                <th>
                    全选
                    <input type="checkbox" @change="allcheckchange" :checked="checkk">
                </th>
                <th>产品图片</th>
                <th>编号</th>
                <th>品牌名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
            <!-- 遍历数组，动态添加 td 内容 -->
            <tr v-for="(item,index) in proArr"  :key="item.id">
                <td>
                    <!-- zai v-for 列表中，v-model还要写value -->
                    <input type="checkbox" v-model="checks" :value="item">
                </td>
                <td>
                    <img :src="item.imgSrc" alt="" width="50" height="50">
                </td>
                <td>
                    {{item.code}}
                </td>
                <td>
                    {{item.proNmae}}
                </td>
                <td>
                    {{item.price}}
                </td>
                <td>
                    <button @click="jianshao(item,index)">-</button>
                    {{item.proNum}}
                    <button @click="zengjia(item)" >+</button>
                </td>
                <td>
                    <input type="button" value="删除" @click="del(index,item.id)">
                </td>
            </tr>
        </table>
        <div class="add" style="text-align:right">
            <h1>
                总价：{{total}}￥
            </h1>
        </div>
        <div class="add" v-show="!proArr.length" style="text-align:center">没有更多内容了</div>
    </div>
</body>
</html>
<script>

    let vm = new Vue({
        
        el: '#app',
        data:{
            //控制全选组件的属性
            checkk:false,
            imgSrc:'',
            proNmae:'',
            price:'',
            code:'',
            //被勾选的内容
            checks:[],
            proArr:[
                {
                    id:1,
                    code:1,
                    imgSrc:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fi2%2F368075820%2FO1CN01tg0GH71srbr5h7O5Y_%21%21368075820.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674790231&t=a8972c872e9e7d4954b7f1b2d5526f5a",
                    proNmae:"随便",
                    price:18,
                    proNum:1,
                },
                {
                    id:2,
                    code:2,
                    imgSrc:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2F2019%2F683%2F289%2F12717982386_1632546836.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674790190&t=fc70252ee04cfc59d840afea66560f70",
                    proNmae:"陈情",
                    price:19.9,
                    proNum:1,
                },
                {
                    id:3,
                    code:3,
                    imgSrc:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2F2018%2F100%2F794%2F9612497001_266469686.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674790252&t=6348232b1a7cf9e5c6443583290e9e0e",
                    proNmae:"三毒",
                    price:16,
                    proNum:1,
                },
            ]         
        },
        watch:{
            //数组不需要深度侦听
            checks(newVal){
                console.log(newVal);
                if(newVal.length === this.proArr.length){
                    //加了事件就不要加v-model
                    //如果长度相等，则让全选勾选按钮开启
                    this.checkk = true;
                }else{
                    this.checkk = false;
                }
            }
        },
        computed:{
            //不要参数，
            total(){
                return (this.checks.reduce(function(total,item){
                    return total += item.price * item.proNum
                },0)).toFixed(2)
            }
        },
        methods:{
            // 点击全选的时候
            allcheckchange(e){
                //判断 checked 为勾选状态的属性，如果是true就全部勾选
                // 如果为false checks数组就为空，
                // console.log(e.target.checked)
                if(e.target.checked){
                    this.checks = this.proArr    
                }else{
                    this.checks = []
                }
                
            },
                add(){
                    //判断内容为空：为什么这个表达式不对，有内容也会执行？？？
                    if( !this.code || !this.proNmae || !this.price ){
                        alert('必须填写编号、产品名称和价格');
                        return
                    }
                    

                    //自写内容没有办法得到？？？
                    let obj = {
                        id:Math.random().toString(32).substr(2),
                        code: this.code,
                        imgSrc:this.imgSrc?this.imgSrc:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huabanimg.com%2Fcc30c03af8ae10f361c98be3c0bb5fda5634687f1617-RDMX48_fw236&refer=http%3A%2F%2Fhbimg.huabanimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674790501&t=436212088bd8959c2819e0ce409a81a7",
                        proNmae: this.proNmae,
                        price: this.price,
                        proNum:1
                    }
                    this.proArr.push(obj)
                },
                del(index,id){
                  let aa =  this.proArr.splice(index,1)
                    
                    // 这个有问题，需要老师来解惑，存在总价bug(已解决)
                    //         console.log(id)
                    // if(this.checks.includes(aa.id)){
                    //     this.checks.splice(index,1);
                    // }
                    // this.checks = this.checks.filter(item =>item.id !== target[0].id)
                    let  aaa = [];
                    this.checks.forEach(item=>{
                        for(var i in this.proArr){
                            if(item === this.proArr[i]){
                                aaa.push(item);
                                break
                            }
                        };                       
                    })
                    this.checks = aaa;
                },
                jianshao(item,index){
                    item.proNum--
                    if(item.proNum === 0){
                        this.proArr.splice(index,1)
                    }
                },
                zengjia(item){
                    item.proNum++
                }
            }
    })



// 自我总结
//1. 在元素中记住要 添加v- 指令系统
//2. 在data数据中要先获取到字段，即：v- 
//3. 在传参中要考虑，传什么参数，怎么传参
//4. 在执行事件的时候，要注意到底是this还是从参数的成员进行程序操作
//5. 要确定在那个元素中遍历，添加正确的遍历位置，v-for
//6. 字母一定要写正确！！！
//7. 全选的时候，设置一个空数组，v-model在勾选框中，然后通过绑定选择事件，判断勾选的状态设置全选还是全不选
//8. 反选时，侦听被勾选的数组的长度的变化是否相同
</script>